<template>
  <el-dialog :visible.sync="pop_charge" title="用血收费/退费项目干预" :close-on-click-modal="false" :center="true" v-el-drag-dialog width="830px" append-to-body>
      <div style="height: 500px; border: 0px solid #eee;width:100%">
          <div class="reportoper">
              <table style="padding-top:0px;border-spacing:0px">
                  <tr>
                      <!--el-tag>说明:仅可修改数量, 数量修改为 0 的则无需计价!</el-tag-->
                      <td style="width:570px">
                          <span style="margin-right:5px;font-size:18px;font-weight:bold;color:blue;padding-left:20px">{{Title_text}}</span>
                      </td>
                      <td style="width:70px" v-show="!Showselct ">
                          <el-button @click="Charge_clear">全部清零</el-button>
                      </td>
                      <td style="width:70px">
                          <el-button @click="Charge_ok">确认</el-button>
                      </td>
                      <td style="width:70px">
                          <el-button @click="Charge_cancle">取消</el-button>
                      </td>
                  </tr>
              </table>
          </div>
          <div style="height: 455px">
              <vxe-table class="bldlist" :data="fee_list" @edit-closed="cellClose" @current-change="rowChange" :loading="floading" :select-config="{reserve: true}" :sort-config="{trigger: 'cell',checkAll: true, reserve: true }" border show-header-overflow :keyboard-config="keyConfig" :show-footer="true" highlight-current-row highlight-hover-column ref="feetable" resizable show-overflow size="mini" stripe height="100%" :auto-resize=" true" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:false,  activeMethod: activemethod }"   :span-method="Browspan_list">
                  <vxe-table-column type="selection" width="40" align="center" v-if="Showselct"></vxe-table-column>
                  <vxe-table-column field="bloodcode" title="血袋编码" width="120" header-align="center" align="left"> </vxe-table-column>
                  <vxe-table-column field="compname" title="血液成分" width="80" header-align="center" align="left">
                  </vxe-table-column>
                  <vxe-table-column field="abo" title="ABO" width="40" header-align="center" align="center"> </vxe-table-column>
                  <vxe-table-column field="rh" title="Rh(D)" width="40" header-align="center" align="center"> </vxe-table-column>
                  <vxe-table-column field="spec" title="规格" width="50" header-align="center" align="center"> </vxe-table-column>
                  <vxe-table-column field="feeitemname" title="收费项目" width="150" header-align="center"> </vxe-table-column>
                  <vxe-table-column field="qty" title="数量" width="60px" header-align="center" align="center" :edit-render="{name: 'input', autoselect:true, events: {change:Qty_change,keyup: Qty_moverow}}">
                  </vxe-table-column>
                  <vxe-table-column field="itemprice" title="单价" width="50" header-align="center" align="center"> </vxe-table-column>
                  <vxe-table-column field="amounts" title="金额" width="50" header-align="center" align="center" :formatter="['toFixedString', 2]"> </vxe-table-column>
                  <vxe-table-column field="feeitemcode" title="收费代码" width="100" header-align="center"> </vxe-table-column>
                  <vxe-table-column field="transid" title="明细ID" width="60" header-align="center"> </vxe-table-column>
                  <template v-slot:fix>
                      <div style="font-size:17px;padding-top:3px;background-color:#fff;text-align:center;font-weight:bold"><span style="color:blue;margin-left:35px">金额合计: ￥{{amountsum}}</span></div>
                  </template>
                  <!--template v-slot:fix>
                  <div style="font-size:12px;padding-top:3px;background-color:#fff;text-align:center;font-weight:bold"><span style="color:blue;margin-left:10px;">袋数: {{datacnt}}</span></div>
              </template-->
              </vxe-table>
          </div>
      </div>
  </el-dialog>

</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "rmpopcharge",
  //props: { width: { type: String, default: "200px" }, value: [Number, String], fee_list: { type: Array }, appendtobody: { type: Boolean, default: true }, //dataname: { type: String }, param1: { type: String } },
  data() {
      return {
          tableData: null,
          pop_charge: false,
          floading: false,
          fee_list: [],
          Charge_user: "", // 计价人
          Showselct: false,
          Title_text: "说明:仅可修改数量, 数量为 0 则无需计价!",
          keyConfig: {
              isDel: false,
              isTab: true,
              isEdit: true,
              isArrow: true,
              enterToTab: true,
              isEnter: true,
          },
          keyLocalConfig: {
              isArrow: true,
          },
          selectRow: {},
          //2022-09-23 cq 病区批量发血
          orderid: 0,
          bldoutList: []
      };
  },
  watch: {
      selectRow: {
          handler(newval, oldval) {
              let _qty = parseInt(newval.qty);
              //let _oldqty = oldval.qty;
              //console.log('_oldqty',_oldqty);
              if ((!XEUtils.isNumber(_qty) || _qty < 0) && !this.Showselct) {
                  this.$alert("请输入有效数量且不小于0!", "提示", {
                      confirmButtonText: "确定",
                      type: "warning",
                  })
                      .then(() => {
                          this.selectRow.qty = 0;
                          this.selectRow.amounts = 0;
                          this.$refs.feetable.setActiveRow(this.selectRow, "qty");
                      })
                      .catch(() => {});
              }
          },
          deep: true,
      },
  },
  computed: {
      datacnt() {
          return this.fee_list.length;
      },
      amountsum() {
          return XEUtils.sum(this.fee_list, "amounts");
      },
  },
  mounted() {},
  created() {},
  methods: {
      Qty_change({ row }) {
          //let _amount = row._amount;
          let _price = row.itemprice;
          row.amounts = _price * row.qty;
          //修改数量时触发 , 金额做相应变动
      },
      cellClose({ row, column, rowIndex }) {
          let _price = row.itemprice;
          row.amounts = _price * row.qty;
      },
      rowChange({ row }) {
          this.selectRow = row;
      },
      activemethod() {
          if (this.Showselct) return false;
          else return true;
      },
      OpenPopCharge(feelist, userno, backfee, orderid, bldoutlist) {
          let that = this;
          this.Title_text = "说明:仅可修改数量, 数量为 0 则无需计价!";
          this.Showselct = false;
          if (backfee) {
              this.Showselct = true;
              this.Title_text = "说明:请勾选需要退费的收费项目";
              this.$nextTick(() => {
                  this.$refs.feetable.clearSelection();
              });
              // this.$refs.feetable.clearSelection();
          }

          if (feelist.length > 0) {
              //     console.log(feelist);
              that.orderid = orderid;
              that.bldoutList = bldoutlist;
              that.fee_list = feelist;
              that.pop_charge = true;
              that.$nextTick(() => {
                  let _row = feelist[0];
                  this.selectRow = _row;
                  that.$refs.feetable.setCurrentRow(_row);
                  that.$refs.feetable.setActiveRow(_row, "qty");
                  that.$refs.feetable.scrollToRow(_row);
              });
              //   that.$refs.feetable.setCurrentRow(feelist[0]);
              //  that.$refs.feetable.setActiveCell(feelist[0], "qty");
          }
      },
      Browspan_list({ row, $rowIndex, column, data })
      {
          //
          let fields = ["bloodcode"];
          let cellValue = row[column.property]; // 列属性
        //  let _matchid = row["matchid"];

          if (cellValue && fields.includes(column.property)) {
              let prevRow = data[$rowIndex - 1];
              let nextRow = data[$rowIndex + 1];

              if (prevRow && prevRow[column.property] === cellValue ) {
                  return { rowspan: 0, colspan: 0 };
              } else {
                  let countRowspan = 1;
                  while (nextRow && nextRow[column.property] === cellValue ) {
                      //&& row["matchid"] === nextRow["matchid"]
                      nextRow = data[++countRowspan + $rowIndex];
                  }
                  if (countRowspan > 1) {
                      return { rowspan: countRowspan, colspan: 1 };
                  }
              }
          }

      },
      Charge_ok() {
          // 直接使用页面中信息计价
          // 日志中数据更新
          // 使用修改后的收费项目, 调用计价接口,  前台接口 / 后台接口
          let _data = this.$refs.feetable.afterFullData;
          if (this.Showselct) {
              // 退费则仅 返回勾选的项目
              _data = this.$refs.feetable.getSelectRecords();
          }

          this.pop_charge = false;
          this.$emit("chagre_modify", 1, _data, this.orderid, this.bldoutList);
      },
      Charge_clear()
      {
          let _data = this.$refs.feetable.afterFullData;
           for (var _row of _data) {
               _row.qty =0;
               _row.amounts=0;
          }
      },

      Qty_moverow(row, event, column) {
          // console.log(event);
          // console.log(column);
          //  console.log(row.rowIndex);
          //this.selectRow = row;
          let index = row.rowIndex;
          if (event.keyCode == 13 || event.keyCode == 40) {
              if (index < this.$refs.feetable.tableFullData.length - 1) {
                  var _row = this.$refs.feetable.tableFullData[index + 1];
                  this.$refs.feetable.setCurrentRow(_row);
                  this.$refs.feetable.setActiveCell(_row, "qty");
              }
          }
          //38  上箭头
          if (event.keyCode == 38) {
              if (index > 0) {
                  var _row = this.$refs.feetable.tableFullData[index - 1];
                  this.$refs.feetable.setCurrentRow(_row);
                  this.$refs.feetable.setActiveCell(_row, "qty");
              }
          }
      },
      Charge_cancle() {
          this.pop_charge = false;
          //取消计价,  取消审核或出库
          this.$emit("chagre_cancle", "");
      },
  },
};
</script>
<style scoped>
.el-main {
  padding: 0;
}
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}
.reportoper {
  width: 100%;
  height: 40px;
  line-height: 40px;
  overflow: hidden;

  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  z-index: 99;
  align-items: center;
  border: 1px solid #ccc;
}
.top-deal {
  right: 5px;
  position: absolute;
  top: 5px;
  display: flex;
  align-items: center;
}

::v-deep .bldlist .col-blue {
  color: blue;
}

::v-deep .el-dialog--center .el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 4px;
  padding-right: 4px;
}
::v-deep  .el-button--small {
  min-width: 60px;
}
</style>